<style scoped>
.expand-row {
  margin-bottom: 16px;
}
.zy-headicon {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: absolute;
  top: -10px;
  left: -35px;
}
</style>
<template>
  <div>
    <Spin v-if="showSpin" fix></Spin>
    <Row class="expand-row" style="position:relative;">
      <img class="zy-headicon" :src="row.headicon" />
      <i-col span="1">&nbsp;</i-col>
      <i-col span="5">
        <span class="expand-key">昵称:</span>
        <span class="expand-value">{{ row.nickname }}</span>
      </i-col>
      <i-col span="5">
        <span class="expand-key">性别:</span>
        <span class="expand-value">{{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '未知' }}</span>
      </i-col>
      <i-col span="5">
        <span class="expand-key">年龄:</span>
        <span class="expand-value">{{ row.age }}</span>
      </i-col>
      <i-col span="5">
        <span class="expand-key">生日:</span>
        <span class="expand-value">{{ row.birthday }}</span>
      </i-col>
    </Row>
    <Row class="expand-row">
      <i-col span="1">&nbsp;</i-col>
      <i-col span="5">
        <span class="expand-key">支付宝账号:</span>
        <span class="expand-value">{{ row.alipay }}</span>
      </i-col>
      <i-col span="5">
        <span class="expand-key">QQ号:</span>
        <span class="expand-value">{{ row.qq }}</span>
      </i-col>
      <i-col span="5">
        <span class="expand-key">微信号:</span>
        <span class="expand-value">{{ row.wechat }}</span>
      </i-col>
      <i-col span="5">
        <span class="expand-key">分享码:</span>
        <span class="expand-value">{{ row.shareCode }}</span>
      </i-col>
    </Row>
  </div>
</template>
<script>
import * as utils from '@/api/utils-v2'
import * as ResponseStatus from '@/api/response-status.js'
import headImg from '@/assets/images/head.png'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
const cdnUrl = config.baseUrl.cdnUrl
export default {
  props: {
    id: Number
  },
  data() {
    return {
      row: Object,
      showSpin: false,
      urls: {
        oneUrl: '/user-detail/admin/one/'
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.showSpin = true
      utils
        .doGet(this.urls.oneUrl + this.id, {})
        .then(res => {
          if (ResponseStatus.OK === res.data.code) {
            this.row = res.data.data
            let imgSrc = this.row.headicon
            if (!imgSrc) {
              imgSrc = headImg
            } else {
              if (imgSrc.indexOf('http') < 0) {
                  imgSrc = cdnUrl + '/' + imgSrc
              }
            }
            this.row.headicon = imgSrc
          } else {
            this.$Message.error(res.data.message)
          }
          this.showSpin = false
        })
        .catch(err => {
          this.showSpin = false
          console.log(err)
        })
    }
  }
}
</script>

